<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'protext' }">课题管理</el-breadcrumb-item>
        </el-breadcrumb>
         <div class="new-box">
            <el-button type="primary"  @click="showDialog">新增学科课题作业</el-button>
        </div>

          <el-table
                :data="protxtList"
                style="width:100%;margin-top:20px"
                :row-class-name="tableRowClassName"
             >
                <el-table-column label="序号"  type="index"> </el-table-column>
                <el-table-column
                    label="学科编号"
                >
                    <template slot-scope="scope">
                        <el-tag  effect="dark" type="danger"> {{scope.row.xkid}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column
                    label="课题名字"
                >
                    <template slot-scope="scope">
                        <el-tag  effect="dark" type="primary"> {{scope.row.proname}}</el-tag>
                    </template>
                </el-table-column>
                  <el-table-column
                    label="课题编码"
                >
                    <template slot-scope="scope">
                        <el-tag  effect="dark" type="success"> {{scope.row.procode}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-popconfirm
                            confirmButtonText='好的'
                            cancelButtonText='不用了'
                            icon="el-icon-info"
                            iconColor="red"
                            title="这个操作很危险哦,真的要删除"
                            @onConfirm="deleteItem(scope.row._id)"
                            >
                            <el-button slot="reference" type="danger" size="small" >删除</el-button>
                         </el-popconfirm>
                    </template>
                 </el-table-column>
             </el-table>

        <el-dialog
            title="新增课题"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form
        :rules="rules"
        :model="form"
        ref="proref"
        label-position="top"
        >

            <el-form-item label="班级学科"  prop="xkname">
                <el-select v-model="form.xkid" >
                    <el-option v-for="(xk,i) in xuekeList" :key="i" :label="xk.xkname" :value="xk.xkid" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课题名称"  prop="proname">
                <el-input v-model="form.proname" />
            </el-form-item>
            <el-form-item label="课题编号" prop="proid" >
                <el-input  v-model="form.proid"  />
            </el-form-item>
             <el-form-item label="课题时间选择" prop="time" >
               <div class="block">
                    <span class="demonstration">设置结束时间</span>
                    <el-date-picker
                    v-model="value1"
                    type="datetime"
                    placeholder="选择日期时间"
                    default-time="12:00:00"
                   
                    value-format="timestamp">
                    </el-date-picker>
                </div>
 
            </el-form-item>
            
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="yun">暂不新增1</el-button>
            <el-button @click="dialogVisible = false">暂不新增</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
           //时间
            pickerOptions: {
            shortcuts: [{
                text: '今天',
                onClick(picker) {
                picker.$emit('pick', new Date());
                }
            }, {
                text: '昨天',
                onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
                }
            }, {
                text: '一周前',
                onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
                }
            }]
            },
            value1: '',
         
            


            dialogVisible:false,
            form:{
                proid:''
            },
            rules:{
                xkid:[
                    {required:true,message:"请选择学科",trigger:'change'},
                ],
                proname:[
                   {required:true,message:"请输入课题名称",trigger:'blur'},
                ],
                proid:[
                   {required:true,message:"请输入课题编码",trigger:'blur'},
                ]
            },
            xuekeList:[],
            procode:"",
            protxtList:[]
        }
    },
    computed:{
       
    },
    watch:{
        form:{
            deep:true,
            handler(newVal){
                 this.procode =  newVal.xkid + "-" + newVal.proid;
            }
        }
    },
    methods:{
         tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 == 0) {
            return 'warning-row';
            } else   {
            return 'success-row';
            }
            return '';
        },

        deleteItem(_id){
            console.log(_id)
            this.$axios.post("/vue/delprotext",{
                _id
            }).then(res=>{
                if(res.data.type){
                    this.protxtList = this.protxtList.filter(item=>item._id!==_id);
                }
            })
        },

        yun(){
            console.log(this.value1);
        },
        add(){
            console.log(this.startTime);
            console.log(this.endTime);
            this.$refs.proref.validate(valid=>{
                if(valid){
                   this.$axios.post("/vue/addprotxt",{
                       ...this.form,
                       procode:this.procode,
                       date:this.value1
                   }).then(res=>{
                       if(res.data.type){
                           this.dialogVisible = false;
                          
                        this.$axios.post("/vue/getpronamelist")
                        .then(res=>{
                            this.protxtList  = res.data.result;
                             this.form = {};
                        })
                           
                       }
                   })
                }else{
                    this.$message.error("请先完善所有信息再提交...")
                }
            })
        },
        showDialog(){
            this.dialogVisible = true 
        },
        handleClose(){
             this.dialogVisible = false 
        }
    },
    mounted(){
        this.$axios.post("/vue/getxueke")
        .then(res=>{
            this.xuekeList = res.data.result;
        })

        this.$axios.post("/vue/getpronamelist")
        .then(res=>{
            this.protxtList  = res.data.result;
        })
    }
}
</script>
